<template>
  <div class="container">
    <img src="../assets/banner.jpg" alt="" class="banner" />
    <div class="list-card" ref="section1">
      <p class="list-title">Hot Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList1"
          :key="item.id"
          @click="toDetails(item.id, index, 1)"
          :src="require('../assets/games1/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section2">
      <p class="list-title">Adventure Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList2"
          :key="item.id"
          @click="toDetails(item.id, index, 2)"
          :src="require('../assets/games2/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section3">
      <p class="list-title">Action Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList3"
          :key="item.id"
          @click="toDetails(item.id, index, 3)"
          :src="require('../assets/games3/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section4">
      <p class="list-title">Strategy Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList4"
          :key="item.id"
          @click="toDetails(item.id, index, 4)"
          :src="require('../assets/games4/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <img src="../assets/banner.jpg" alt="" class="banner" />
    <div class="list-card" ref="section5">
      <p class="list-title">Fighting Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList5"
          :key="item.id"
          @click="toDetails(item.id, index, 5)"
          :src="require('../assets/games5/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section6">
      <p class="list-title">Simulation Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList6"
          :key="item.id"
          @click="toDetails(item.id, index, 6)"
          :src="require('../assets/games6/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section7">
      <p class="list-title">Selected Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList7"
          :key="item.id"
          @click="toDetails(item.id, index, 7)"
          :src="require('../assets/games7/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <div class="list-card" ref="section8">
      <p class="list-title">Leisure Games</p>
      <div class="list">
        <img
          v-for="(item, index) in gameList8"
          :key="item.id"
          @click="toDetails(item.id, index, 8)"
          :src="require('../assets/games8/game' + (index + 1) + '.jpg')"
          alt=""
          class="list-img"
        />
      </div>
    </div>
    <img src="../assets/banner.jpg" alt="" class="banner" />
  </div>
</template>

<script>
import gameData from "@/assets/data.json";

export default {
  name: "Home",
  props: {
    sectionsName: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      gameList1: gameData.slice(0, 9),
      gameList2: gameData.slice(9, 18),
      gameList3: gameData.slice(18, 27),
      gameList4: gameData.slice(27, 36),
      gameList5: gameData.slice(36, 45),
      gameList6: gameData.slice(45, 54),
      gameList7: gameData.slice(54, 63),
      gameList8: gameData.slice(63, 72),
    };
  },
  watch: {
    sectionsName(newVal) {
      // console.log(newVal);
      const element = this.$refs[newVal];
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    },
  },
  methods: {
    toDetails(id, index, fileIndex) {
      this.$router.push({
        path: "/details",
        query: { id: id, index: index + 1, fileIndex: fileIndex },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .banner {
    width: 100%;
  }
}
.list-card {
  margin: 30px 20px 10px 20px;
  padding: 10px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 18px 0 rgb(0 0 0 / 16%);
  .list-title {
    font-size: 22px;
    color: #41b883;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;

    .list-img {
      width: 94px;
      height: 94px;
      border-radius: 10px;
    }
  }
}
</style>